<template>
    <div class="scenics-main" >
        <div class="scheader-contain" >
            <div  class="input-container">
                <el-input @keyup.enter.native="searchByName" v-model="name" style="width: 100%" placeholder="Please enter the attraction" class="search"
                    :input-style="inputstyle">
                    <template #prefix>
                        <svg style="width: 20px; height: 20px;" t="1723672944902" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="4344">
                            <path
                                d="M469.344 789.344c176.736 0 320-143.264 320-320s-143.264-320-320-320-320 143.264-320 320 143.264 320 320 320z m296.864-44.032l136.704 139.936a42.656 42.656 0 0 1-61.056 59.616l-140.096-143.424a403.488 403.488 0 0 1-232.416 73.216C245.44 874.656 64 693.216 64 469.344S245.472 64 469.344 64c223.84 0 405.312 181.472 405.312 405.344 0 106.592-41.152 203.584-108.448 275.968z"
                                fill="#000000" p-id="4345"></path>
                        </svg>
                    </template>
                </el-input>
            </div>
          
            <div style="  width: 100%; position: relative;margin-left: 10px;">
                <div class="scroll-btn-left" @click="sroLeft()" v-if="showLeftButton">
                    <svg style="width: 25px;height: 25px;transform: rotateY(180deg);" t="1723719044215"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7932"
                        width="200" height="200">
                        <path
                            d="M345.6 896a38.4 38.4 0 0 1-27.15-65.55L636.89 512 318.45 193.55a38.4 38.4 0 0 1 54.3-54.3l345.6 345.6a38.39 38.39 0 0 1 0 54.3l-345.6 345.6A38.27 38.27 0 0 1 345.6 896z"
                            fill="#000000" p-id="7933"></path>
                    </svg>
                </div>
                <div class="scrollable-container" ref="scrollContent">
                    <div class="scroll-content" >
                        <div :class="['custom-checkbox', { 'is-checked': item.checked }]"
                            v-for="(item, index) in ScenicTypes" :key="item.name" @click="check(index)">
                            {{ item.name }}
                        </div>
                    </div>     
            </div>
            <div class="scroll-btn-right" @click="scrollRight" v-if="showRightButton" >
                <svg style="width: 25px;height: 25px;margin-left: 5px;" t="1723719044215"
                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7932"
                    width="200" height="200">
                    <path
                        d="M345.6 896a38.4 38.4 0 0 1-27.15-65.55L636.89 512 318.45 193.55a38.4 38.4 0 0 1 54.3-54.3l345.6 345.6a38.39 38.39 0 0 1 0 54.3l-345.6 345.6A38.27 38.27 0 0 1 345.6 896z"
                        fill="#000000" p-id="7933"></path>
                </svg>
            </div>
            </div>
        </div>

        <!-- <div  class="scenics-items"> -->
                <div  class="inner-content">
                    <div class="item" style="margin: 10px;" v-for="item,index in ScenicList" :key="index">
                        <div class="groupitem">
                            <div class="Guid-image">
                                <img :src="item.image"   style="width: 120px;object-fit: fill;height: 100px;border-radius: 15px;"/>
                            </div>
                            
                            <div style="display: grid;">
                                <div class="title">{{item.name}}</div>
                                <el-rate size="small" style="margin-left: 10px;" v-model="item.score" disabled show-score
                                    text-color="#ff9900" score-template="" />
                                <div style="display: flex;justify-content: space-between;">
                                    <div class="type">
                                        {{item.type}}
                                    </div>
                                    <div @click="add(item)"   v-if="!item.checked">
                                        <!-- <svg t="1723756297446" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11292" style="width: 100%; height: auto;">
                                            <path d="M510.833431 62.695924c-247.644193 0-448.406636 200.762443-448.406636 448.406636 0 247.65545 200.762443 448.416869 448.406636 448.406636 247.65545 0 448.416869-200.76142 448.416869-448.416869C959.2503 263.458367 758.488881 62.695924 510.833431 62.695924zM779.544429 562.112328 560.358381 562.112328l0 219.186048-102.008278 0L458.350103 562.112328 239.164055 562.112328l0-102.008278 219.186048 0L458.350103 240.918002l102.008278 0 0 219.186048 219.186048 0L779.544429 562.112328z" fill="#e16531" p-id="11293"></path>
                                        </svg> -->
                                        <!-- <svg t="1725817494220" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13727" width="256" height="256"><path d="M514.44224 15.15008c-275.31776 0-499.30752 223.9744-499.30752 499.29728 0 275.34336 223.98976 499.31264 499.30752 499.31264 275.33312 0 499.36384-223.96928 499.36384-499.31264C1013.80608 239.12448 789.77536 15.15008 514.44224 15.15008zM788.18816 575.4624l-212.75136 0 0 212.80768L453.43744 788.27008l0-212.80256-212.7872 0L240.65024 453.44768l212.78208 0L453.43232 240.6912l121.99936 0 0 212.75648 212.7616 0L788.19328 575.4624z" fill="#fa4e06" p-id="13728"></path></svg> -->
                                        <img  class="icon"  src="../../assets/add.png" />
                                    </div>
                                    <div @click="del(item)"  v-if="item.checked">
                                        <!-- <svg height="30" width="30" t="1723756721305" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12397" style="width: 100%; height: auto;">
                                            <path d="M512 129.3312c210.432 0 382.6688 172.1856 382.6688 382.6688 0 210.432-172.1856 382.6688-382.6688 382.6688-210.432 0-382.6688-172.1856-382.6688-382.6688 0-210.432 172.1856-382.6688 382.6688-382.6688z m-1.024 534.6304l234.2912-271.2576-67.7888-58.5728-234.24 271.2576-101.7344-87.8592-58.5728 67.84 169.472 146.432 58.624-67.84z" fill="#0e932e" p-id="12398"></path>
                                        </svg> -->
                                        <!-- <svg t="1725816849609" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12486" width="256" height="256"><path d="M512.083915 64.734385c-247.21296 0-447.607415 200.390362-447.607415 447.603322s200.391385 447.608439 447.607415 447.608439c247.208866 0 447.605369-200.393432 447.605369-447.608439C959.687237 265.126794 759.292782 64.734385 512.083915 64.734385zM524.007028 665.571858l-71.565282 70.39968-71.593936-70.39968 0.019444-0.020467L213.850554 501.239419l71.566305-70.421171 167.014653 164.328345L738.750971 313.452701l71.566305 70.422194L524.004981 665.568788 524.007028 665.571858z" fill="#0e932e" p-id="12487"></path></svg> -->
                                        <img  class="icon" src="../../assets/select.png" />
                                    </div>

                                </div>
                            </div>

                        </div>
                        <div class="scenics-overview" @click="open(item)">
                            Overview:{{item.overview}}
                        </div>
                    </div>
                </div>
        
        <!-- </div> -->
    </div>
</template>

<script lang="ts" setup>
    import { ref, defineEmits, onMounted, watch,nextTick ,onUnmounted  } from 'vue';
    import { scenicTypeList, scenicList } from '@/api/index';
    import { ElScrollbar } from 'element-plus'
    import { useStore } from 'vuex';
    import Cookies from 'js-cookie';
    const emit = defineEmits();
    const store = useStore();
    const name = ref('');
    // const customScrollbarHeight = ref('')
    const inputstyle = ref({
        color: "#000"
    });
    const ScenicTypes = ref < ScenicType[] > ([]);
    const ScenicList = ref([]);
    const scrollref = ref < InstanceType < typeof ElScrollbar > | null > (null);
    const scrollLeft = ref(0);
    interface ScenicType {
        name: string;
        checked: boolean;
    }

    const windowHeight = ref(window.innerHeight);
    // customScrollbarHeight.value = windowHeight.value - 160
    const scrollContent = ref(null);
    const showLeftButton = ref(false);
    const showRightButton = ref(false);

    const updateButtonVisibility = () => {
        const content = scrollContent.value;
        const containerWidth = content.parentElement.clientWidth;
        const contentWidth = content.scrollWidth;
        console.log(content.scrollLeft)
        showLeftButton.value = content.scrollLeft > 0;
        showRightButton.value = content.scrollLeft < contentWidth - containerWidth;
        // customScrollbarHeight.value = windowHeight.value - 185
    };
    onMounted(async () => {
        await nextTick();
        updateButtonVisibility();
        window.addEventListener('resize', updateButtonVisibility);
        if (scrollContent.value) {
            scrollContent.value.addEventListener('scroll', updateButtonVisibility);
        }
    });
    // watch(() => scrollContent.value.scrollLeft, updateButtonVisibility);
    onUnmounted(() => {
  window.removeEventListener('resize', updateButtonVisibility);
});

    function sroLeft() {
        const content = document.querySelector('.scrollable-container');
        content.scrollBy({
            left: -100, // 每次滚动的距离（可以根据需要调整）
            behavior: 'smooth' // 平滑滚动
        });
    }

    function scrollRight() {
        const content = document.querySelector('.scrollable-container');
        content.scrollBy({
            left: 100, // 每次滚动的距离（可以根据需要调整）
            behavior: 'smooth' // 平滑滚动
        });
    }

    const queryParam = ref({})
    const PlanQurry = ref({})
    if (Cookies.get('setPlanQurry')) {
        PlanQurry.value = JSON.parse(Cookies.get('setPlanQurry'))
    } else {
        // if (Cookies.get('plans')) {
        //     PlanQurry.value = JSON.parse(Cookies.get('setPlanQurry'))
        // }
         if ( sessionStorage.getItem('plans')) {
            PlanQurry.value = JSON.parse(sessionStorage.getItem('plans'))
        }
    }

    function open(params) {
        emit('openDetail', params);
    }


    queryParam.value = { page: 0, size: 50, region: PlanQurry.value.region }

    function getscenicList() {
        scenicList(queryParam.value).then(res => {
            ScenicList.value = res.content.map(item => ({
                ...item,
                checked: checkeSelect(item.id)
            }));

        });
    }

    function checkeSelect(id) {
        for (let index = 0; index < store.state.events.length; index++) {
            const element = store.state.events[index];
            if(element.id == id){
                return true
            }
        }
        return false
    }


    function getscenicTypeList() {
        scenicTypeList({ page: 0, size: 50 }).then(res => {
            ScenicTypes.value = res.content.map(item => ({
                ...item,
                checked: false
            }));
        });
    }


    store.commit('clearEvents');
    function add(item) {
        if (!item.checked) {
            item.checked = true
            store.commit('addEvents', item); // 通过 dispatch 触发 mutation

        }

    }

    function del(item) {
        if (item.checked) {
            item.checked = false
            store.commit('delEvents', item); // 通过 dispatch 触发 mutation 
        }
    }


    getscenicTypeList();
    getscenicList();
    function check(index: number) {
        ScenicTypes.value[index].checked = !ScenicTypes.value[index].checked;
        queryParam.value['types'] = []
        ScenicTypes.value.forEach(element => {
            if (element.checked) {
                queryParam.value['types'].push(element.name)
                console.log(queryParam.value)
            }
        });
        getscenicList()
    }
    function searchByName() {
        queryParam.value['name'] = name.value
        getscenicList()
    }

    // function settop() {
    //     console.log(scrollref.value)
    //     scrollLeft.value = scrollLeft.value + 100
    //     scrollref.value.setScrollLeft(scrollLeft.value)
    // }
    // function setlefttop() {
    //     scrollLeft.value = scrollLeft.value - 100
    //     scrollref.value.setScrollLeft(scrollLeft.value)
    // }

    // function scroll(scrollTop) {
    //     scrollLeft.value = scrollTop.scrollLeft
    // }


</script>
<style scoped>
  .scenics-overview{
    width: 260px;
    border-radius: 8px;
    background-color: #c0c0c0;
    height: 40px;
    margin-top: 5px;
    font-size: 14px;
    padding: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 16px;
  }


    .search>.el-input__wrapper {
        background-color: #bebebec5;
        border-radius: 10px;
    }

    .tag-scroll-container {
        display: flex;
        align-items: center;
        position: relative;
    }

    .scroll-content {
        position: relative;
        display: flex;    
        flex-direction:column;
        flex-wrap: wrap;
        height: 30px;   
        max-width: fit-content;
        min-width: 340px; 
        /* background-color: #333;

        display: flex;    
        white-space: nowrap; /* 防止内容换行 */
    }
    .scrollable-container {
        /* position: relative;
        width: 100%; 
        overflow: hidden; 
        overflow-x: auto; 
        overflow-y: hidden;
        margin-left: 10px;
        padding-right: 40px; */
        /* position: relative;  */
        width: 100%; /* 设置容器宽度为 100% 或根据需要设置固定宽度 */
        overflow-x: auto; /* 使容器内容可以横向滚动 */
        overflow-y: hidden; /* 隐藏垂直滚动条（如果不需要的话） */
        padding-right: 40px; /* 为按钮预留空间，确保内容不会遮挡按钮 */
        box-sizing: border-box; /* 确保内边距和边框不会影响宽度 */
        border-radius: 30px;
        }
    .scrollable-container::-webkit-scrollbar {
        display: none;
        }
    .scroll-btn-left {
z-index: 99;
        position: absolute;
        height: 30px;
        width: 30px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        border-radius: 35px;
        line-height: 30px;
        align-items: center;
        left: 0px;
        background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgb(95, 95, 95) 100%);
    }

    .scroll-btn-right {

        position: absolute;
        height: 30px;
        width: 30px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        border-radius: 35px;
        line-height: 30px;
        align-items: center;
        right: 0px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(95, 95, 95) 100%);

    }


    .type {
        font-weight: bold;
        color: black;
        font-size: 12px;
        width: max-content;
        background-color: #bebebec5;
        height: 25px;
        padding-left: 10px;
        padding-right: 10px;
        line-height: 25px;
        border-radius: 25px;
        display: flex;
        margin-left: 6px;
        justify-content: center;
        white-space: nowrap;
    }

    .title {
        width: 130px;
        height: 40px;
        font-weight: bold;
        font-size: 15px;
        color: #000;
        margin-bottom: 0;
        margin-left: 10px;
        word-wrap: break-word; /* 自动换行 */
        overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 超出部分用省略号表示 */
    }

    .Guid-image {
        width: 120px;
        height: 100px;
        border-radius: 10px;
    }

    .groupitem {
        display: flex;
        justify-content: flex-start;

    }

    .scrollbar-flex-content {
        display: flex;
    }

    .scrollbar-demo-item {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 50px;
        margin: 10px;
        text-align: center;
        border-radius: 4px;
        background: var(--el-color-danger-light-9);
        color: var(--el-color-danger);
    }

    .checkbox-group {
        display: flex;

        white-space: nowrap;
        overflow-x: hidden;
        overflow-y: hidden;
        margin-left: 35px;

    }

    .custom-checkbox {
        font-weight: bold;
        color: black;
        border: 2px solid rgb(255, 255, 255);
        background-color: #bebebec5;
        height: 30px;
        padding-left: 15px;
        padding-right: 15px;
        line-height: 30px;
        border-radius: 25px;
        display: flex;
        margin-left: 6px;
        justify-content: center;
        white-space: nowrap;
        flex: 0 0 auto; 
    }

    .is-checked {
        border: 2px solid black;
    }

    .right-button {
        line-height: 32px;
        background-color: #bebebec5;
        width: 32px;
        height: 32px;
        border-radius: 15px;
        right: 15px;
    }


    .el-scrollbar__thumb {
        height: 0px;
        height: 0%;
        background-color: #fff
    }


    .item {
        width: 300px;
        height: 180px;
        background-color: #e7e7e7;
        border-radius: 20px;
        margin-right: 20px;
        padding: 20px;

    }

    .scheader-contain{
        padding-left: 10px;
        height: 50px;
        display: flex;
        align-items: center; /* 垂直居中对齐 */
        width: 100%;
    }
    .input-container {
        width: fit-content;
            min-width: 252px; /* 固定宽度 */
        }
    .scenics-main{
           padding: 0,10px,10px,10px;

    border-top: 1px solid #ebebeb;
    height: 100%; /* 设置容器高度为 100% */
    width: 100%; /* 设置容器宽度为 100% */
    overflow: hidden; /* 隐藏超出容器的内容 */
    box-sizing: border-box; /* 确保内边距和边框不会影响宽度和高度 */
    padding-bottom: 30px;
    }
    .scenics-items{
        display: flex;
        flex-wrap: wrap;
        height: 100%;
        
        padding: 10px; 
        box-sizing: border-box; 

    /* background-color: #ff9393; */
    }
.inner-content{
    min-width: 645px;
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    height: 100%;
    overflow-x: hidden;
    /* background-color: #ff9393; */
    align-content: flex-start;
   padding-bottom: 20px;
}
.inner-content::-webkit-scrollbar {
        display: none;
        }
        .icon {
        width: 25px;
        height: 25px;
    }
</style>